import * as tf from '@tensorflow/tfjs'

/**
 * 将HTML图片元素转换为TensorFlow张量，并进行预处理
 * @param {HTMLImageElement} img - 输入的图片元素
 * @returns {tf.Tensor} - 处理后的4D张量 [1, 224, 224, 3]
 */
export function img2x(img) {
    // 使用tf.tidy自动清理中间张量，避免内存泄漏
    return tf.tidy(()=>{
        // 1. 将图片转换为张量
        // 2. 将整数像素值转换为浮点数
        // 3. 归一化：将像素值从[0,255]转换为[-1,1]范围
        // 4. 重塑张量为模型期望的输入形状：[批量大小, 高度, 宽度, 通道数]
        const input = tf.browser.fromPixels(img)
            .toFloat()              // 转换为浮点型张量
            .sub(255/2)             // 减去127.5，将范围从[0,255]移到[-127.5, 127.5]
            .div(255/2)             // 除以127.5，将范围归一化到[-1, 1]
            .reshape([1, 224, 224, 3])  // 重塑为批量大小为1的4D张量
        return input
    })
}

/**
 * 将File对象转换为HTML图片元素
 * @param {File} f - 文件输入框选择的文件对象
 * @returns {Promise<HTMLImageElement>} - 返回加载完成的图片元素Promise
 */
export function file2img(f) {
    return new Promise(resolve => {
        const reader = new FileReader()  // 创建文件读取器
        reader.readAsDataURL(f)          // 将文件读取为DataURL（base64编码）
        reader.onload = (e) => {         // 文件读取完成后的回调
            const img = document.createElement('img')  // 创建图片元素
            img.src = e.target.result    // 设置图片源为DataURL
            img.width = 224              // 设置图片宽度为224px（MobileNet模型输入尺寸）
            img.height = 224             // 设置图片高度为224px
            img.onload = () => {         // 图片加载完成后解析Promise
                resolve(img)
            }
        }
    })
}